<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <!-- 自定义的标签，在vue项目中，称为组件 -->
    <mytitle></mytitle>
    <mytitle></mytitle>
    <mytitle></mytitle>
    <mytitle></mytitle>
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    // 全局组件 一但声明完成，就可以在所有的组件中直接使用，无需引入和注册
    // 定义的组件，它的元素必须要有一个顶层元素进行包裹，否则报错
    Vue.component('mytitle', {
      data() {
        return {
          title: '我是一个标题'
        }
      },
      // 生成直接生成 虚拟dom方法  
      // 在工程化中，render中可以直接写jsx,在引入一个babel可以写jsx语法(js的增强版本)
      // render(h) {
      //   // console.log(h);
      //   // let vnode = h('h3', null, '我是一个标签')
      //   let vnode = h('h3', { attrs: { name: 'abc', style: 'color:red' } }, '我是一个标签')
      //   return vnode
      // }
      template: `<div>
        <h3 name='abc' @click="setTitle">{{title}}</h3><div>aaaa</div>
        <hr />
        <subtitle></subtitle>
        </div>`,
      methods: {
        setTitle() {
          this.title = Date.now()
        }
      }
    })

    Vue.component('subtitle', {
      template: `<div>
          <h3>我是一个子标题</h3>
        </div>`
    })


    const vm = new Vue({
      el: '#app',
      data: {
      }
    })
  </script>

</body>

</html>